"use client";

import { ColumnDef } from "@tanstack/react-table";
import { Badge } from "@/components/ui/badge";
import { TestProduct } from "@/db/schema/test-table-v2";
import { OrderWithDetails } from "./column-defs";

// === Product Columns (Pattern 1, 2) ===
// meta.serverGroupable: 서버 사이드 GROUP BY 지원 여부

export const productColumns: ColumnDef<TestProduct>[] = [
  {
    accessorKey: "id",
    header: "ID",
    size: 60,
    enableGrouping: false, // 클라이언트 그룹핑도 비활성화
    meta: { serverGroupable: false },
  },
  {
    accessorKey: "sku",
    header: "SKU",
    size: 100,
    enableGrouping: false,
    meta: { serverGroupable: false },
  },
  {
    accessorKey: "name",
    header: "Product Name",
    size: 200,
    enableGrouping: false,
    meta: { serverGroupable: false },
  },
  {
    accessorKey: "category",
    header: "Category",
    size: 120,
    enableGrouping: true, // ✅ 그룹핑 가능
    meta: { serverGroupable: true },
    cell: ({ getValue }) => {
      const category = getValue() as string;
      return <Badge variant="outline">{category}</Badge>;
    },
  },
  {
    accessorKey: "price",
    header: "Price",
    size: 100,
    enableGrouping: false,
    meta: { serverGroupable: false },
    cell: ({ getValue }) => {
      const price = parseFloat(getValue() as string);
      return new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: "USD",
      }).format(price);
    },
  },
  {
    accessorKey: "stock",
    header: "Stock",
    size: 80,
    enableGrouping: false,
    meta: { serverGroupable: false },
    cell: ({ getValue }) => {
      const stock = getValue() as number;
      return (
        <span className={stock < 10 ? "text-red-500 font-medium" : ""}>
          {stock}
        </span>
      );
    },
  },
  {
    accessorKey: "status",
    header: "Status",
    size: 110,
    enableGrouping: true, // ✅ 그룹핑 가능
    meta: { serverGroupable: true },
    cell: ({ getValue }) => {
      const status = getValue() as string;
      const variants: Record<string, "default" | "secondary" | "destructive"> = {
        active: "default",
        inactive: "secondary",
        discontinued: "destructive",
      };
      return <Badge variant={variants[status] || "secondary"}>{status}</Badge>;
    },
  },
  {
    accessorKey: "isNew",
    header: "New",
    size: 60,
    enableGrouping: true, // ✅ 그룹핑 가능
    meta: { serverGroupable: true },
    cell: ({ getValue }) => {
      const isNew = getValue() as boolean;
      return isNew ? <Badge className="bg-emerald-500">NEW</Badge> : null;
    },
  },
  {
    accessorKey: "createdAt",
    header: "Created",
    size: 110,
    enableGrouping: false,
    meta: { serverGroupable: false },
    cell: ({ getValue }) => {
      const date = getValue() as Date;
      return date ? new Date(date).toLocaleDateString() : "-";
    },
  },
];

// === Order Columns with joined data (Pattern 3 - Custom Service) ===

export const orderColumns: ColumnDef<OrderWithDetails>[] = [
  {
    accessorKey: "id",
    header: "ID",
    size: 60,
  },
  {
    accessorKey: "orderNumber",
    header: "Order #",
    size: 140,
    cell: ({ getValue }) => (
      <span className="font-mono text-xs">{getValue() as string}</span>
    ),
  },
  {
    accessorKey: "customerName",
    header: "Customer",
    size: 150,
  },
  {
    accessorKey: "customerTier",
    header: "Tier",
    size: 90,
    cell: ({ getValue }) => {
      const tier = getValue() as string;
      if (!tier) return "-";
      const colors: Record<string, string> = {
        standard: "bg-gray-500",
        premium: "bg-blue-500",
        vip: "bg-amber-500",
      };
      return (
        <Badge className={colors[tier] || "bg-gray-500"}>
          {tier.toUpperCase()}
        </Badge>
      );
    },
  },
  {
    accessorKey: "productName",
    header: "Product",
    size: 180,
  },
  {
    accessorKey: "quantity",
    header: "Qty",
    size: 60,
  },
  {
    accessorKey: "totalAmount",
    header: "Total",
    size: 100,
    cell: ({ getValue }) => {
      const amount = parseFloat(getValue() as string);
      return new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: "USD",
      }).format(amount);
    },
  },
  {
    accessorKey: "status",
    header: "Status",
    size: 110,
    cell: ({ getValue }) => {
      const status = getValue() as string;
      const variants: Record<string, "default" | "secondary" | "destructive" | "outline"> = {
        pending: "outline",
        processing: "secondary",
        shipped: "default",
        delivered: "default",
        cancelled: "destructive",
      };
      const colors: Record<string, string> = {
        delivered: "bg-emerald-500",
        shipped: "bg-blue-500",
      };
      return (
        <Badge 
          variant={variants[status] || "secondary"}
          className={colors[status] || ""}
        >
          {status}
        </Badge>
      );
    },
  },
  {
    accessorKey: "orderedAt",
    header: "Order Date",
    size: 110,
    cell: ({ getValue }) => {
      const date = getValue() as Date;
      return date ? new Date(date).toLocaleDateString() : "-";
    },
  },
];